<template>
  <div class="card-box">
    <div class="cardBoxItem">
      <i class="bigIcon el-icon-download" />
      <div class="words">
        <h3>填写导入的信息</h3>
        <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，且每个表头行内容不可为空，单次导入的数据不超过1000条。</p>
        <el-button @click="downTemplate" size="small" icon="el-icon-download">下载模板</el-button>
      </div>
    </div>
    <div class="cardBoxItem">
      <i class="bigIcon el-icon-upload2" />
      <div class="words">
        <h3>上传填好的信息表</h3>
        <p>请按照收据模板的格式准备导入数据，模板中的表头名称不可更改， 表头行不能删除，且每个表头行内容不可为空，单次导入的数据不超过1000条。</p>
        <el-upload
          action="/admin/sys-file/upLodeFileAdd"
          accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
          ref="upload"
          type="file"
          :file-list="fileList"
          :on-preview="handlePreview"
          :http-request="uploadSectionFile"
          :auto-upload="false"
          :on-remove="handleRemove"
          :before-remove="beforeRemove"
          :on-change="handleChange"
          :on-success="onSuccess"
          :before-upload="beforeUpload"
          multiple
          :limit="1"
          :on-exceed="handleExceed"
        >
          <el-button size="small" icon="el-icon-upload2">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">只能上传xlsx/xls文件</div>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script src="./js/leading-in-first.js">
</script>
<style scoped lang="scss">
.card-box {
  padding: 0 80px;
  .cardBoxItem {
    border: 1px solid #eaeaea;
    border-radius: 3px;
    margin-bottom: 20px;
    padding: 16px 50px 16px 50px;
    display: flex;
    align-items: center;
    h3 {
      font-size: 18px;
      font-weight: normal;
      color: #455a64;
    }
    p {
      color: #788394;
      font-size: 14px;
      margin: 10px 0;
    }
    .bigIcon {
      font-size: 42px;
      margin-right: 50px;
      color: #455a64;
    }
    /deep/ .el-upload-list__item {
      display: flex;
      align-items: center;
    }
  }
}
</style>
